"use client"

import { useActionState } from "react";
import { createProduct, FormState } from "@/actions/products";
import Submit from "@/components/submit";

export default function ProductsDBCreate() {
    const initialState: FormState = {
        errors: {}
    };
    const [state, formAction] = useActionState(createProduct, initialState);
    // const [state, formAction, pending] = useActionState(createProduct, initialState); //相当于stat是error，formAction是data，pending是pending
    return (
        <form action={formAction}>
            <h1 className="text-3xl text-center font-bold">Server Action Form Page</h1>
            <div className="max-w-md mx-auto p-4">
                <div>
                    <label className="block mb-2">
                        Title:
                        <input
                            type="text" className="w-full p-2 border rounded"
                            name="title"
                        />
                    </label>
                    {state.errors.title && <p className="text-red-500">{state.errors.title}</p>}
                </div>
                <div>
                    <label className="block mb-2">
                        Price:
                        <input
                            type="number" className="w-full p-2 border rounded"
                            name="price"
                        />
                    </label>
                    {state.errors.price && <p className="text-red-500">{state.errors.price}</p>}
                </div>
                <div>
                    <label className="block mb-2">
                        Description:
                        <textarea className="w-full p-2 border rounded" name="description"></textarea>
                        {state.errors.description && <p className="text-red-500">{state.errors.description}</p>}
                    </label>
                </div>
                <Submit />
                {/* <button
                    type="submit" className="bg-blue-500 text-white px-4 py-2 rounded disabled:bg-gray-400"
                    disabled={pending}
                >
                    Add Product
                </button> */}
            </div>
        </form>
    )
}
